<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{count}}</div>
        <!-- v-on:click  绑定一个点击事件 -->
        <button v-on:click="countInc">{{count}}</button>
        <!-- @ 是v-on:的简写  官方 语法糖 -->
        <button @click="changeAge">{{obj.girlFriend.age}}</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, shallowRef } = Vue;
        createApp({
            setup() {
                const count = shallowRef(0)
                const obj = shallowRef({
                    name: 'zhangsan',
                    age: 18,
                    girlFriend: {
                        name: 'lili',
                        age: 19
                    }
                })
                const countInc = () => {
                    count.value++
                }
                const changeAge = () => {
                    obj.value.girlFriend.age++
                    console.log(obj.value.girlFriend.age);

                }
                return {
                    count,
                    countInc,
                    obj,
                    changeAge
                }

            }
        }).mount("#app")
    </script>
</body>

</html>